<template>
	<view style="">
		<view class="tip">
			完善资料并完成认证，才能交易！
		</view>
		<view class="margin col padding" >
			<u--form labelPosition="left" :model="info" :rules="rules" ref="uForm">
				<u-form-item label="姓名" prop="name"  :labelWidth="labelWidth" :borderBottom="true" required>
					<input class="input" placeholder="请输入" placeholder-class="place" v-model="info.name"/>
				</u-form-item>
				<u-form-item label="身份证号" prop="card_id"  :labelWidth="labelWidth" :borderBottom="true" required>
					<input class="input" placeholder="请输入" placeholder-class="place" v-model="info.card_id"/>
				</u-form-item>
				<u-form-item label="联系方式" prop="mobile"  :labelWidth="labelWidth" :borderBottom="true" required>
					<input class="input" placeholder="请输入" placeholder-class="place" v-model="info.mobile"/>
				</u-form-item>
				<u-form-item label="默认收货地址" prop="address"  :labelWidth="labelWidth" :borderBottom="true" required>
					<input class="input" placeholder="请输入" placeholder-class="place" v-model="info.address"/>
				</u-form-item>
				<u-form-item label="上传身份证照片" prop="pic1"  :labelWidth="labelWidth" labelPosition="top" required>
					<view class="col">
						<image src="/static/images/verify_pic1.png" class="card" v-model="info.pic1"></image>
					</view>
				</u-form-item>
				<u-form-item label="" prop="pic2"  :labelWidth="labelWidth"  style="margin-top: -30rpx;" >
					<view class="col">
						<image src="/static/images/verify_pic2.png" class="card" v-model="info.pic2"></image>
					</view>
				</u-form-item>
			</u--form>
		</view>
		<view class=" padding">
			<view class="face row-between-center">
				<view class="row-center">
					<image src="/static/images/verify_face.png" class="face-img"></image>
					<view class="face-text">人脸识别</view>
				</view>
					<view class="face-text2">去识别</view>
			</view>
			<view class="row-h-center" style="margin-top: 48rpx;">
				<image :src="check?'/static/images/check_y.png':'/static/images/check_n.png' " class="check" @click="check=!check"></image>
				<view class="agree" style="margin-left: 12rpx;">
					我已阅读并同意 <span class="blue">《用户服务协议》》</span>
				</view>
			</view>
			<view class="btn row-center" @click="goRegiste">
				提交认证
			</view>
		</view>
	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				labelWidth:120,
				info:{
					name:'',
					card_id:'',
					mobile:'',
					address:'',
					pic1:'',
					pic2:'',
				},
				check:false,
				rules: {
					'name': {
							type: 'string',
							required: true,
							message: '请输入手机号',
							trigger: ['blur', 'change']
						},
					'card_id': {
						type: 'string',
						required: true,
						message: '请输入身份证号',
						trigger: ['blur', 'change']
					},
					'mobile': {
						type: 'string',
						required: true,
						message: '请输入联系方式',
						trigger: ['blur', 'change']
					},
					'address': {
						type: 'string',
						required: true,
						message: '请输入收货地址',
						trigger: ['blur', 'change']
					},
					'pic1': {
						type: 'string',
						required: true,
						message: '请上传身份证正面',
						trigger: ['blur', 'change']
					},
					'pic2': {
						type: 'string',
						required: true,
						message: '请上传身份证反面',
						trigger: ['blur', 'change']
					},
				},
			}
		},
		methods: {
			goRegiste(){
					this.$refs.uForm.validate().then(res => {
								uni.$u.toast('校验通过')
								uni.navigateTo({
									url:'/src/pages/other/registeStatus'
								})
							}).catch(errors => {
								uni.$u.toast('校验失败')
					})
			},
		}
	}
</script>
<style>
	page{
		background-color: white;
	}
</style>
<style scoped lang="scss">
	.padding{
		padding-left: 20rpx;
		padding-right: 20rpx;
	}
	.margin{
		margin-left: 20rpx;
		margin-right: 20rpx;
		width: calc(100% - 40rpx);
	}
.tip{
	background: #F2F3F8;
	padding: 16rpx 20rpx;
	color: #6A6876;
	font-size: 24rpx;
	font-style: normal;
	font-weight: 400;
	line-height: 40rpx; /* 166.667% */
}
.key{
	color:  #17161B;
	font-size: 28rpx;
	font-style: normal;
	font-weight: 400;
	line-height: 44rpx; /* 157.143% */
}
.place{
	color: #C9CCD5;
	font-size: 28rpx;
	font-style: normal;
	font-weight: 400;
	line-height: 44rpx; /* 157.143% */
}
.card{
	margin-top: 20rpx;
	width: 470rpx;
	height: 280rpx;
	flex-shrink: 0;
}

.face{
	padding-left: 34rpx;
	padding-right: 26rpx;
	width: 100%;
	height: 96rpx;
	flex-shrink: 0;
	border-radius: 4rpx;
	background: #F2F3F8;
	.face-img{
		width: 64rpx;
		height: 64rpx;
		flex-shrink: 0;
	}
	.face-text{
		margin-left: 30rpx;
		color:  #17161B;
		font-size: 28rpx;
		font-style: normal;
		font-weight: 400;
		line-height: 44rpx; /* 157.143% */
	}
	.face-text2{
		color: #347FFF;
		font-size: 28rpx;
		font-style: normal;
		font-weight: 400;
		line-height: 44rpx; /* 157.143% */
	}
}
.check{
	width: 28rpx;
	height: 28rpx;
}
.agree{
	color: #000;
	font-size: 24rpx;
	font-style: normal;
	font-weight: 400;
	line-height: 36rpx; /* 150% */
}
.btn{
	margin-top: 48rpx;
	width: 100%;
	height: 92rpx;
	flex-shrink: 0;
	border-radius: 32rpx;
	background: #3B60D3;
	color: #FFF;
	font-size: 32rpx;
	font-style: normal;
	font-weight: 400;
	line-height: 44rpx; /* 137.5% */
}
.blue{
	margin-top: 48rpx;
	color: #2653A4;
	font-size: 24rpx;
	font-style: normal;
	font-weight: 400;
	line-height: 36rpx;
}
</style>
